<template>
   <div>
       <myheader :img_src='img_src' />
       <h1>欢迎{{username}}来到用户中心</h1>
       <div v-show="show">
           <br>
            头像 : <van-image round width='20rem'  height='20rem' :src="img_src" />
            用户名: {{user_list.username}} <br>
            密码: {{user_list.password}} <br>
            积分: {{user_list.num}} <br>
            手机号: {{user_list.phone | filterTel}} <br>
            
                <van-button @click="is_show = !is_show" algin='right'> 修改密码 </van-button>
                <div v-show="is_show">
                    <van-cell-group>
                       <van-field
                                v-model="form.password"
                                :rules="[
                                    { required: true, message: '请输入原密码!'},
                                    ]"
                                type="password"
                                label="原密码"
                                placeholder="请输入原密码"
                                clearable
                                />

                                 <van-field
                                v-model="form.password1"
                                :rules="[
                                    { required: true, message: '请输入新密码'},
                                    { pattern: /^[0-9a-zA-Z_]{8,}$/, message: '密码由下划线/数字和英文8位起不能出现特殊字符！'}
                                    ]"
                                type="password"
                                label="新密码"
                                placeholder="请输入新密码"
                                clearable
                                />

                              <van-field
                                v-model="form.password2"
                                :rules="[
                                    { required: true, message: '请确认密码！'},
                                    ]"
                                type="password"
                                label="确认密码"
                                placeholder="请确认密码"
                                clearable
                                />

                                <van-button color='red' @click="put_password">确认修改</van-button>
                                </van-cell-group>
                </div>
                     <van-button @click="is_img = !is_img"> 上传头像 </van-button>
                <div v-show="is_img">
                     <!-- <van-cell-group>
                    头像  <input type="file" id = 'img' @change="get_file">

                          <van-button color='red' @click="add_img">确认上传</van-button>
                    </van-cell-group> -->

                    头像上传 <van-uploader :after-read='afterRead' />

                    多文件上传控件: <van-uploader multiple v-model="filelist" :max-size='1024 * 200'
                                        @oversize='oversize'
                                        :after-read='afterRead_list' :before-read='beforeread' />
                                        <!-- 上传之后                        上传之前 -->
                            <!-- //圆的   相对化适应大小 -->


                </div>
                 <van-button color='red' @click="cancellation"> 注销账户 </van-button>
                  <van-button color='green' @click="is_imgfiles = !is_imgfiles"> 自身所有文件 </van-button>
                    
                <div v-show="is_imgfiles">
                    <table border="1">
                        <tr>
                            <td>图片</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="i in imgfiles">
                            <td><img :src="url+i" alt="" width="100px" height="100px"></td>
                            <td>
                                <van-button color='red' @click="del_file(i)">删除</van-button>
                            </td>
                        </tr>
                    </table>    
                </div>
                <!-- <van-button color='#030301' @click="sort_file"> 文件名排叙 </van-button>  -->
                <van-button color='#030301' @click="dingding"> 钉钉登录 </van-button>  
                <!-- <van-button color='#00E1FA' @click="sort_files_suffix"> 文件后缀排叙 </van-button><br>
             
                文件名排叙:{{fileslist}} <br>
                文件后缀排序:{{fileslist_suffix}} <br> -->
                <van-button @click="tz"> 查看所有文件 </van-button>  
                
       </div>
   </div>
</template>

<script>
import Myheader from './myheader.vue';

export default {
   data () {
      return {
        filelist:[],
        img_src:'',
        user_list:'',
        username:'',
        show:0,
        is_show:false,
        is_img:false,
        form:{token:localStorage.getItem('token')},
        id:localStorage.getItem('id'),
        pic:'',
        imgfiles:[],
        is_imgfiles:false,
        url:'http://localhost:5000/static/upload/'+localStorage.getItem('id')+'/',
        fileslist:[],
        fileslist_suffix:[],
      };
   },
        //过滤器
       filters:{
        //加密手机号
        filterTel(val){
            if (val){
                return (val.substring(3,0))+'****'+(val.substring(7));
            }
        }
       },
   methods: {
       //跳转文件页面
       tz:function(){
        this.$router.push('myfile/')
       },
       //钉钉账户登录
       dingding:function(){
            this.axios.get(this.localhost+'ding_urls/')
            .then(res=>{
                window.location.href = res.data.url
            })
       },
       //文件名后缀排序
       sort_files_suffix:function(){
            this.axios.get(this.localhost+'sort_files_suffix/?id='+this.id)
            .then(res=>{
                console.log(res);
                this.fileslist_suffix = res.data.fileslist
            })
       },
       //文件名倒叙
       sort_file:function(){
           this.axios.get(this.localhost+'sort_files/?id='+this.id)
           .then(res=>{
               console.log(res);
               this.fileslist = res.data.fileslist
           })
       },
       //删除本地文件
       del_file:function(i){
           this.axios.delete(this.localhost+'del_files/?id='+this.id+'&filename='+i)
           .then(res=>{
               console.log(res);
               if(res.data.code == 200){
                   this.files()
               }
           })
       },
       // 展示所有文件
       files:function(){
               this.axios.get(this.localhost+'getfiles/?id='+this.id)
           .then(res=>{
               console.log(res);
               this.imgfiles = res.data.filelist
           })
       },
       //文件类型校验
       beforeread:function(file){
            console.log(file.type);
            if (file.type === 'text/plain'){
                this.$toast.fail('您不能上传文本');
                return false;
            }
            return true;
       },
       //限制文件大小体积
       oversize:function(file){
           this.$toast.fail('对不起,您的文件过大,超出了200kb');
       },
       //多文件上传
       afterRead_list:function(file){
           console.log(file)
           //遍历文件列表
           for (let i=0,x=file.length;i<x;i++){
               console.log(file[i]);
               //调用单个上传
               this.afterRead(file[i]);
           }
       },
       //注销用户
       cancellation:function(){
           this.axios.post(this.localhost+'del_user/',this.qs.stringify({'token':localStorage.getItem('token'),'id':this.id}))
           .then(res=>{
               console.log(res);
               if (res.data.code == 200){
                    this.$toast.success(res.data.meg)
                    localStorage.removeItem('username');
                    this.$router.push('/login_1')
               }
           })
       },
       //上传文件方法
        afterRead:function(file){
            //声明表单
            // console.log(file);
            let data = new FormData();
            data.append('file',file.file);
            data.append('id',this.id);
            //创建文价上传实例
            const myaxios = this.axios.create({withCredentials:false});
            myaxios({
                method:'post',
                url:'http://localhost:5000/youpyun/',
                data:data
            })
            .then(res=>{
                console.log(res);
                //将头像赋值
                this.img_src = this.upload_dir+res.data.filename
                this.myinfo()
                 this.files()
            })
        },
    //    //获取文件
    //    get_file(){
    //         let img = document.getElementById('img').files[0]
    //         console.log(document.getElementById('img').files)
    //         this.pic = img
    //    },
    //    //上传图片
    //    add_img:function(){
    //        let files = new FormData()
    //        console.log(files);
    //        files.append('file',this.pic)
    //        files.append('id',this.id)
    //        this.axios.post('http://localhost:5000/upload/',files)
    //        .then(res=>{
    //            if(res.data.code == 200){
    //                //添加成功重新获取头像
    //                this.img_src = 'http://localhost:5000/static/upload/'+res.data.filename
    //                this.myinfo()
    //            }
    //            console.log(res)
    //        })
    //    },

        myinfo:function(){
           this.axios.get(this.localhost+'userinfo/?token='+localStorage.getItem('token')+'&id='+this.id)
           .then(res=>{
               if(res.data.id == localStorage.getItem('id')){
                    this.user_list = res.data
                    this.username = res.data.username
                    this.img_src = this.upload_dir+res.data.id+'/'+res.data.img
                    this.show = 1
               }else{
                    this.user_list = res.data
               }
           })
        },
        put_password:function(){
           if (this.form.password1 == this.form.password2){
               this.axios.post(this.localhost+'put_password/',this.qs.stringify(this.form))
               .then(res=>{
                   console.log(res);
                   if (res.data.code == 200){
                       alert('密码修改成功')
                   }else{
                       alert(res.data.meg)
                   }
               })
           }else{
               alert ('两次密码不一致!请重新输入!')
               this.form.password2 = ''
               return false
           }
        }
   },
    mounted() {
        this.myinfo()
        this.files()
    },
   computed: {},

   components: {
      Myheader

   },

}
</script>
<style lang='css' scoped>

</style>
